<template>
  <div class="whitebg">
    <div class="h_header flexrowbetween">
      <span>今日流量数据</span>
    </div>
    <div class="h_content">
      <el-row :gutter="10" v-loading="loading">
        <el-col :span="12">
          <div class="l_piebox">
            <el-dropdown trigger="click" class="mr_10 pdropdown">
              <el-button type="primary" size="mini" class="f-14">
                全部渠道
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <div class="dropbody">
                  <el-checkbox-group
                    v-model="checkedOption"
                    class="flexcolumn"
                    @change="changeSelect"
                  >
                    <el-checkbox
                      v-for="(item, index) in selectoptions"
                      :label="item.id"
                      :key="index"
                      class="m_5"
                      >{{ item.name }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
            <div v-if="checkedOption.length">
              <div class="piechart" v-if="!loading">
                <!--<BarChart height='360px' name='流量数据' :colors='colors' :chartData='tableData'/>-->
                <div id="chart" style="height: 420px; width: 100%"></div>
                <div class="pcontent flexcolumn aligncenter justifycenter">
                  <div class="f-16 f_w5 mb_10 c_000">总流量</div>
                  <div class="f-16 f_w5 mb_10 c_000">点击量：{{ click_num }}</div>
                  <div class="f-16 f_w5 mb_10 c_000">展示量：{{ get_num }}</div>
                </div>
              </div>
            </div>
            <div v-else style="height: 420px; width: 100%"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="tablebox bg_F8F8F8">
            <el-table height="420" :data="checkedOption.length?tableData:[]" stripe style="width: 100%">
              <el-table-column prop="date" label="渠道" align="center">
                <template slot-scope="scope">
                  <div class="flex aligncenter full_w pl_15">
                    <div
                      class="colorbox"
                      :style="{ backgroundColor: colors[scope.$index] }"
                    ></div>
                    <span class="pl-6 qdname"></span>{{ scope.row.name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="点击量" align="center">
                <template slot-scope="scope">
                  <div class="flexcenter justifycenter">
                    <div class="dj_num mr_15">{{ scope.row.data.click }}</div>
                    <div class="c_primary">{{ scope.row.click_rate }}%</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="展示量" align="center">
                <template slot-scope="scope">
                  <div class="flexcenter justifycenter">
                    <div class="dj_num mr_15">{{ scope.row.data.get }}</div>
                    <div class="c_primary">{{ scope.row.get_rate }}%</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { todayNum } from "@/api/home";
import BarChart from "@/components/Echart/BarChart";
import * as echarts from "echarts";

export default {
  data() {
    return {
      loading: false,
      // 版位
      checkedOption: [],
      selectoptions: [],
      click_num: 0,
      get_num: 0,
      lineChartData: {
        expectedData: [],
        actualData: [],
      },
      tableData: [],
      colors: [
        "#87BEDB",
        "#5B70C0",
        "#9FCA7E",
        "#F1C96B",
        "#DB6E6A",
        "#1670F1",
      ],
      serverList: [],
      XdataList: [],
    };
  },
  components: {
    BarChart,
  },
  created() {
    this.getDicts("/manager/api/getPlateList").then((res) => {
      this.selectoptions = res.data;
      this.checkedOption = res.data.map((item) => item.id);
      this.getData();
    });
  },
  methods: {
    getChart() {
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          top: 80,
          left: 20,
          right: 0,
          bottom: 20,
        },
        xAxis: [
          {
            type: "category",
            data: this.XdataList,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: this.serverList,
      };

      option && myChart.setOption(option);
      window.addEventListener('resize', function(){
        myChart.resize()
      })
    },

    changeSelect(arr) {
      // console.log('arr:', arr)
      this.getData();
    },

    getData() {
      this.loading = true;
      todayNum({ id: this.checkedOption })
        .then((res) => {
          this.click_num = res.data.all_click;
          this.get_num = res.data.all_get;
          this.tableData = res.data.list.map((item) => {
            item.value = item.data.click;
            if (this.click_num == 0) {
              item.click_rate = 0;
            } else {
              item.click_rate =
                ((item.data.click / this.click_num) * 100).toFixed(2);
            }
            if (this.get_num == 0) {
              item.get_rate = 0;
            } else {
              item.get_rate = ((item.data.get / this.get_num) * 100).toFixed(2);
            }
            return item;
          });
          this.XdataList = [];
          this.serverList = [];
          let list = [];
          let sList = [];
          this.tableData.forEach((item) => {
            this.XdataList.push(item.name);
            list.push(item.data.get);
            sList.push(item.data.click);
          });
          let a = {
            name: "展示量",
            type: "bar",
            data: list,
            barWidth: 30,
          };
          let b = {
            name: "点击量",
            type: "bar",
            data: sList,
            barWidth: 30,
          };
          this.serverList.push(a);
          this.serverList.push(b);
          this.$nextTick(() => {
            this.getChart();
          });

          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.h_header {
  border-bottom: 1px solid #d5d5d5;
  height: 55px;
  padding: 0 15px;
}

.h_content {
  padding: 25px;
}

.databox {
  padding: 12px 30px;
}

.tablebox {
  width: 100%;
  height: 420px;
  margin: auto;
  max-width: 680px;
  .el-table {
    background-color: transparent;
    border: 0;

    ::v-deep tr,
    ::v-deep th {
      background-color: transparent !important;
    }

    ::v-deep .el-table__cell {
      border-bottom: 0;
    }
  }

  .el-table::before {
    height: 0;
  }
}

.colorbox {
  width: 20px;
  height: 13px;
}

.l_piebox {
  width: 100%;
  position: relative;
}

.pdropdown {
  position: absolute;
  z-index: 1;
}

.piechart {
  position: relative;
}

.pcontent {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  flex-direction: row;

  & > div {
    text-align: center;
    margin-left: 20px;
  }
}
</style>
